{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>更换手机号</title>
<style type="text/css">
    html,body{ background-color: #fff;}
    .mui-content{ background-color: #fff; padding-top: 10%;}
    .mui-content>.mui-table-view:first-child{ margin-top: 0;}
    .mui-input-group{background: none;padding: 0 25px;}
    .mui-input-group .mui-input-row{height: 65px;}
    .mui-input-group:before,.mui-input-group:after{height: 0;}
    .mui-input-group input{margin: 15px 0 0 0; padding: 10px 0;}
    .mui-input-group .mui-input-row:after{background-color: #ddd !important;left: 0;}
    .mui-input-row .mui-input-password~.mui-icon-eye{top: 30px;}
    .mui-content-padded{ margin: 15px 0 0 0;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <input type="text" placeholder="请输入手机号码">
        </div>
        <div class="mui-input-row">
            <input type="text" class="mui-input-clear" placeholder="请输入手机验证码">
            <input type="button" class="mb-code" value="获取验证码">
        </div>
        <div class="mui-input-row">
            <input type="text" placeholder="请输入新手机号码">
        </div>
        <div class="mui-content-padded">
            <button type="button" id="toastBtn" class="mui-btn mui-btn-primary mui-btn-block">确认修改</button>
        </div>
    </form>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script type="text/javascript" charset="utf-8">
    document.getElementById("toastBtn").addEventListener('tap', function() {
        mui.toast('手机号修改成功');
    });
</script>
<!--flotdemo-->
{% endblock %}
